<template>
  <div class="box">
    <div class="box5">
      <input type="text" placeholder="搜索备忘录" to="/search">
       <div class="box3">2022年</div>
    </div>
    <div v-for="(item, index) in def" :key="index" class="box1" @click="tz(def[index])">
      <div class="box4">
        <h4>{{ item.day }}</h4>
        <span>{{ item.yue }}月</span>
      </div>
      <div class="box5">
        <p class="p1">{{ item.ipt }}</p>
        <span class="span2">{{ item.shi }}</span>
      </div>
      <div class="box2">
        <router-link :to="{ path: '/editor/' + index }" class="a">
          <!-- <div @click="fun(index)"> -->
            <span class="span">编辑</span>
          <!-- </div> -->
        </router-link>
        <span class="span1" @click="remove(index)">刪除</span>
      </div>
    </div>
    <router-link to="/news" class="el-icon-plus">
      <p class="p1">新建</p>
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: mapState({
    def: (state) => state.list,
  }),
  methods: {
    ...mapMutations(["sss"]),
    remove(index) {
      this.sss(index);
    },
    tz(e){
    console.log(e);
      this.$router.replace(`clickMe/?name=${e.ipt}&type=${e.ipt1}`);
    },
  },
};
</script>

<style scoped>
a{
  text-decoration: none;
  color: #333;
}
.box1 {
  height: 100px;
  border-radius: 10px;
  background-color: #eeeeee;
  margin: 15px 20px;
}
.box2 {
  position: relative;
  bottom: -43px;
  text-align: right;
  margin-right: 15px;
}
.box2 span {
  margin: 0px 8px;
}
h4 {
  font-size: 22px;
  margin-top: 25px;
}
.box4 {
  width: 100px;
  height: 100px;
  float: left;
  border-right: 1px solid #333;
}
.p1 {
  padding-top: 10px;
  padding-left: 10px;
  text-align: center;
  margin: 0px;
}
.a {
  text-decoration: none;
  color: #333;
}
.box .el-icon-plus {
  padding-top: 10px;
  text-decoration: none;
  width: 120px;
  height: 50px;
  font-size: 18px;
  border: 1px solid #333;
  border-radius: 20px;
  color: #333;
  position: absolute;
  bottom: 50px;
  right: 130px;
}
.box  .span,.span1{
  z-index: 99;
}
.span2 {
  font-size: 18px;
  position: relative;
  top: 40px;
  left: -93px;
}
.box5 .box3{
  display: inline-block;
  line-height: 59px;
  position: relative;
  right: 45px;
}
.box5{
  display: flex;
  justify-content: space-between;
}
.box5 input{
  height: 40px;
  line-height: 40px;
  border: none;
  outline: none;
  border: 1px solid #999;
  border-radius: 10px;
  margin-left: 20px;
  margin-top: 10px;
}
</style>